<template>
    <el-table
      :data="rightList"
      style="width: 100%"
      stripe
      border>

      <!-- index 序列 -->
      <el-table-column
        label="#"
        type="index"
        align="center">
      </el-table-column>

      <!-- 权限名 -->
      <el-table-column
        prop="permissionName"
        label="权限名"
        align="center">
      </el-table-column>

      <!-- 路径 -->
      <el-table-column
        prop="url"
        label="路径"
        align="center">
      </el-table-column>

      <!-- 操作 -->
      <el-table-column prop="level" label="操作" align="center">
      <template v-slot="data">
        <!-- 按钮区 -->
        <el-button-com
          size="small"
          btnType="primary"
          icon="el-icon-edit"
          text="编辑"
          @click.native="openDialog(data.row.id)"
        />
        <el-button-com
          size="small"
          btnType="danger"
          icon="el-icon-delete"
          text="删除"
          @click.native="delUserById(data.row.id)"
        />
      </template>
    </el-table-column>
    </el-table>
</template>

<script>
// 组件
import ElButtonCom from '@/components/common/ElButtonCom'

// 请求
import { delPermission } from '@/network/rightControlRequest.js';

export default {
  props: {
    rightList: {
      type: Array
    }
  },
  methods: {
    /**
     * 删除权限
     */
    async delUserById(id) {
      const ret = await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(e => e);
      if (ret !== 'confirm') {return this.$message('删除取消');}

      // 删除
      console.log(id);
      const {meta} = await delPermission(id);
      if (meta.status != 200) { return this.$message.error(meta.msg); }
      this.$bus.$emit('getRightList');
      return this.$message.success(meta.msg);
    },

    /**
     * 编辑权限
     */
    openDialog(id) {
      this.$bus.$emit('openUpdDialog', id);
    }
  },
  components: {
    ElButtonCom
  }
}
</script>
